<template>
	<div class="popup">
		<div class="popup-box">
			<div class="eTitle task">
				<h2>任务分解下发</h2>
			</div>
			<div class="popup-main Lbox-content">
				<el-form :model="elForm" ref="elForm">
					<div class="content">
						<div class="lf">
							<div class="title">
								所属项目：<span>{{ project_name }}</span> / {{ sub_project_name }}
							</div>
							<el-form-item>
								<el-input clearable maxlength="50" placeholder="请填写任务标题" v-model.trim="elForm.title"></el-input>
							</el-form-item>
							<el-form-item><el-input :rows="7" maxlength="1000" type="textarea" clearable placeholder="请输入项目需求描述" v-model="elForm.note"></el-input></el-form-item>
						</div>
						<div class="rt">
							<el-form-item label="指派给:">
								<el-select v-model="elForm.task_user" filterable placeholder="请选择任务执行人">
									<el-option
										v-for="(item,idx) in options"
										:key="idx+1"
										:label="item"
										:value="idx+1"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="任务类型:">
								<el-select v-model="elForm.task_type" filterable placeholder="请选择任务类型">
									<el-option
										v-for="(item,idx) in project_type"
										:key="idx+1"
										:label="item"
										:value="idx+1"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item :rules="FormRule.Select" label="计划开始日期：" prop="start_date">
								<el-date-picker	v-model="elForm.start_date" type="date" placeholder="请选择计划开始日期"></el-date-picker>
							</el-form-item>
							<el-form-item :rules="FormRule.Select" label="计划结束日期：" prop="end_date">
								<el-date-picker	v-model="elForm.end_date" type="date" placeholder="请选择计划结束日期"></el-date-picker>
							</el-form-item>
							<el-form-item :rules="FormRule.NotNull" label="建议绩效：" prop="user">
								<el-input style="width:70%;" clearable maxlength="50" placeholder="请输入绩效金额(元)" v-model.trim="elForm.money"></el-input>
							</el-form-item>
						</div>
					</div>
					<el-form-item style="width:30%;margin:0 auto;" class="el-btn-box">
						<el-button @click="confirm" class="el-btn" icon="el-icon-check" type="primary">添加</el-button>
						<el-button @click="cancel" class="el-btn" icon="el-icon-close" type="info">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'task',
	data() {
		return {
			loading: false,
			project_name: '',
			sub_project_name: '',
			type: '',
			articleType: '1',
			id: '',
			options: ['赵大','王二','张三','李四','陈五'],
			project_type: ['UI','硬件','软件','云平台','测试'],
			elForm: {
				start_date: '',
				end_date: '',
				imgSrc: '/img/fileImg-bj.png',
				class: '',
				type: '',
				customer: '',
				project_name: '',
				date1: '',
				date2: '',
				date3: '',
				user: '',
				remark: '',
				title: '',
				note: ''
			},
			isFile: true
		};
	},
	methods: {
		SubEvents(type, data) {
			this.type = type
			// this.$popup.maxHeight();
			this.elForm = {...this.elForm, ...data}
		},
		goBack() {
			this.$router.push({
				path: '/projectDetail',
				query: {
					id: 1
				}
			});
		},
		GetData() {
			let description = JSON.parse(JSON.stringify(this.elForm.description));
			for (let i = 0; i < description.length; i++) {
				if (description[i].type == 'img') {
					delete description[i].img_src;
				}
			}
			let data = {
				type: Number(this.articleType),
				id: this.id,
				index_img_url: this.elForm.index_img_url,
				title: this.elForm.title,
				detail: description
			};
			this.$http.APIASK('/course/save', 'post', data)
			.then(data => {
				if (data&&data.code == 0) {
					this.$emit('confirm', false);
					if (this.type == 0) {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					} else {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					}
				}
			});
		},
		RadioChange(e) {
			if (e == 1) {
				this.articleType = 1;
			} else {
				this.articleType = 2;
			}
		},
		GetFile(formdata, i) {
			this.$api.Upload(formdata)
			.then(data => {
				if (data&&data.code == 0) {
					this.$message({
						message: '成功',
						type: 'success'
					});
					if (i == -1) {
						this.elForm.index_img_url = data.data.path;
					} else {
						this.elForm.description[i].content = data.data.path;
					}
				} else {
					if (i == -1) {
						this.elForm.imgSrc = '';
					} else {
						this.elForm.description[i].img_src = '';
					}
				}
			});
		},
		fileImage(e, i) {
			let file = e.target.files[0];
			let format = file.name.split('.')[1];
			if (format == 'jpg' || format == 'jpeg' || format == 'png') {
				let formdata = new FormData();
				formdata.append('file', file);
				this.GetFile(formdata, i);
				let _this = this;
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(evt) {
					if (i == -1) {
						_this.elForm.imgSrc = evt.target.result;
					} else {
						_this.elForm.description[i].img_src = evt.target.result;
					}
				};
				this.isFile = false;
				this.$nextTick(() => {
					this.isFile = true;
				});
			} else {
				this.$message.error('error');
			}
		},
		addInfo(n) {
			if (n == 0) {
				this.elForm.description.push({
					pid: '',
					type: 'text',
					content: ''
				});
			}
			if (n == 1) {
				this.elForm.description.push({
					pid: '',
					type: 'img',
					img_src: '',
					content: ''
				});
				this.$nextTick(() => {
					this.$refs.file[this.elForm.description.length - 1].dispatchEvent(new MouseEvent('click'));
				});
			}
		},
		remove(i) {
			if (this.elForm.description.length > 1) {
				this.elForm.description.splice(i, 1);
			} else {
				this.$message.error('error');
			}
		},
		imgClick(i) {
			this.$refs.file[i].dispatchEvent(new MouseEvent('click'));
		},
		confirm() {
			this.$refs['elForm'].validate(valid => {
				if (valid) {
					this.GetData();
				} else {
					return false;
				}
			});
		},
		cancel() {
			this.$emit('cancel', false);
		}
	}
};
</script>
<style scoped lang="scss">
	.popup {
		.popup-box {
			width: 1300px;
		}
	}
	.Lbox-content {
		.content {
			display: flex;
			.lf {
				width: 60%;
			}
			.rt {
				width: 30%;
				margin-left: 8%;
			}
		}
		.el-form--inline .el-form-item {
			display: block;
		}
	}
</style>
